/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { message,Select, Row, Col, Tabs, Card, InputNumber, Popover, Tag, Checkbox, Collapse, Table, Button, DatePicker,TreeSelect } from 'antd';
import Container from '../../components/common/Container';
import MyTable from '../../components/common/MyTable';
import PublicService from '../../services/PublicService';
import request from '../../utils/request';

import moment from 'moment';
import style from './WordAdd.less';
const Panel = Collapse.Panel;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const Option = Select.Option;
class WordAdd extends Component {

    constructor(props) {
        super(props)
        this.columns = [
            {
                title: '序号',
                dataIndex: 'num',
                width: '5%',
                align: "center",
                key: "1"
            },
            {
                title: '外勤人员',
                dataIndex: 'patrolPersonnelName',
                width: '10%',
                align: "center",
                key: "2",
         

            },
            {
                title: '外勤任务',
                dataIndex: 'taskName',
                width: '10%',
                key: "3",
                align: "center",
               
            },
            {
                title: '任务类型',
                dataIndex: 'taskType',
                width: '10%',
                key: "31",
                align: "center",
                render: (text, record) => {
                    return <span>{text == 1 ? "安全检查" : "安全考核"}</span>

                }
            },
            {
                title: '预计完成时间',
                dataIndex: 'willFinishTime',
                width: '10%',
                key: "32",
                align: "center",
                render: (text, record) => {
                    return <span>{text?moment(text).format("YYYY-MM-DD"):""}</span>

                }
            },
           
          
            {
                title: '操作',
                width: '10%',
                dataIndex: 'number145',
                align: "center",
                key: "5",
                render: (text, record) => {
                    return <Tag color="#108ee9" onClick={this.ondelete.bind(this, record)}>删除</Tag>

                }
            }


        ];

    }


    state = {
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
        dataSource: [],
        pageIndex: 1,
        pageSize: 10,
        patrolPersonnelName:"",
        idList: [],
        name: "",
        selectArr: [],
        treeData: [
        ],
        patrolPersonnelId: "",
        value: [],
        valueName:[],
        taskType:1,
        willFinishTime:moment()

    }

    componentDidMount() {

        request({
            url: `/zhrq-web/gas/gaspandect/getGasSiteList`,
            method: 'POST',
            data: {}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {

                this.setState({
                    treeData: data.ret.list
                })

                setTimeout(() => {
                    console.log(this.state.treeData)
                }, 1000);
            }
        })

        request({
            url: `/zhrq-web/patrol/patroltask/getPatrolPersonnelList`,
            method: 'GET',

        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                this.setState({
                    selectArr: data.ret
                })
            }
        })


    }

    //删除
    ondelete = (record) => {
        var deleteArr = []
        console.log(record,this.state.dataSource)
        this.state.dataSource.forEach((item) => {
            if(record.num == item.num) {
                deleteArr = this.state.dataSource.splice(record.num-1, 1)
            }
        })

        setTimeout(() => {
            console.log(deleteArr)
            this.setState({
                dataSource:this.state.dataSource
            })
        })
       

    }









    onA = () => {
        this.props.history.goBack()
    }

    //下拉
    onSelect = (v, b) => {
        console.log(v, b)
        this.setState({
            patrolPersonnelId: v,
            patrolPersonnelName:b.props.children
        })
    }

    onTreeSelect = (v, b, n) => {
        console.log(v, b, n)
        this.setState({
         
            valueName:b,
            value: v
        })
    }

    onSelect1 = (v) => {
        this.setState({
            taskType: v
        })
    }

    onDate = (v,b) => {
        console.log(v,b)
        this.setState({
            [v]:b
        })
    }

    onadd = (v) => {
        console.log(this.state.patrolPersonnelId,this.state.value,this.state.valueName,this.state.willFinishTime,this.state.taskType)

        if(!this.state.patrolPersonnelId) {
            message.warning("请选择分配人员!")
            return
        }

        if(!this.state.value) {
            message.warning("请选择外勤任务!")
            return
        }

        let arr = []

        this.state.valueName.forEach((item,index) => {
            arr.push({
                patrolPersonnelId:this.state.patrolPersonnelId,
                patrolPersonnelName:this.state.patrolPersonnelName,
                taskName:item,
                taskType:this.state.taskType,
                willFinishTime:this.state.willFinishTime
            })
        })

        setTimeout(() => {
            this.setState({
                dataSource:arr
            })
        },300)

    }

    save = () => {
        let data = []
        this.state.dataSource.forEach((item) => {
           data.push({
            baseUserId:1,
            patrolPersonnelId:item.patrolPersonnelId,
            taskName:item.taskName,
            taskType:item.taskType,
            willFinishTime:moment(item.willFinishTime).format("YYYY-MM-DD")
           })
        })
        request({
            url: `/zhrq-web/patrol/patroltask/insertList`,
            method: 'POST',
            data:data
        }).then(data => {
            console.log(data)
            if(data.rc == 0) {
                message.success("添加成功")
                setTimeout(() => {
                    this.onA()
                },500)
            }
        })
    }



    render() {
        const { treeData,loading, selectedRowKeys, dataSource, pageIndex, pageSize, name, number116, number145, number500 } = this.state
        const windowWidth = document.body.clientWidth;
        const columns = this.columns
        const height = document.body.clientHeight;
        let containerHeight = '75vh';
        if (windowWidth > 1367) {
            containerHeight = '75vh';
        }

        return (
            <div>
                <Card className={style.Top_box}
                    bodyStyle={{ padding: "6px 24px" }}
                >
                    <Row>
                        <Col span={12}><a onClick={this.onA}>外勤任务管理</a> >> 任务分配</Col>
                        <Col span={12}><a onClick={this.onA} style={{ float: "right" }}>返回</a></Col>
                    </Row>
                    <br />
                    <Row style={{lineHeight:2}}>
                        <Col span={6}>外勤人员 :
                        <Select  style={{ width: 150, marginLeft: 5, marginRight: 20 }} onChange={this.onSelect} size="small">
                               
                                {this.state.selectArr &&
                                    this.state.selectArr.map((item, index) => {
                                        return (
                                            <Option key={index} value={item.id}>{item.name}</Option>
                                        )
                                    })
                                }


                            </Select>

                        </Col>

                        <Col span={6}>任务类型 :
                        <Select defaultValue={1} style={{ width: 120, marginLeft: 5, marginRight: 20 }} onChange={this.onSelect1} size="small">
                               
                                <Option value={1}>安全检查</Option>
                                <Option value={2}>安全考核</Option>
                            </Select>

                        </Col>
                        <Col span={6}>
                        预计完成时间 : <DatePicker size="small" onChange={this.onDate.bind(this, "willFinishTime")} value={this.state.willFinishTime} /> 
                        </Col>
                    </Row>

                    <Row  style={{lineHeight:3}}>

                        <Col span={12}> <span>外勤任务 : </span>
                            <TreeSelect
                                size="small"
                                style={{ width: 300 }}
                                treeData={treeData}
                                value={this.state.value}
                                onChange={this.onTreeSelect}
                                maxTagCount={2}
                                // treeCheckable={true}
                                // treeCheckStrictly={true}
                                // showCheckedStrategy={TreeSelect.SHOW_CHILD}
                                // searchPlaceholder: 'Please select',
                                // treeDefaultExpandAll={true}
                                treeCheckable={true}
                                treeDataSimpleMode={true}

                            />
                        </Col>

                        <Col span={4}>
                        <Button type="primary" size="small" onClick={this.onadd}>添加</Button>
                        </Col>
                        
                    </Row>


                </Card>

                <Container
                    style={{ height: containerHeight, position: "relative", marginTop: "1vh", padding: "0px 10px" }}
                    header={true}
                >


                    <MyTable
                        // bordered
                        loading={loading}
                        columns={columns}
                        // rowSelection={rowSelection}
                        pagination={false}
                        // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                        dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                    />
                    <Button type="primary" onClick={this.save} className={style.Btn_bc}>确认</Button>
                </Container>
            </div>
        )
    }
}
export default (WordAdd);
